<template>
  <view class="container">
    <view class="logo">
      <!-- <image src="../../static/images/avatar.jpg" mode="aspectFill" class="logo-image" /> -->
	  <!-- <text class="logo-text">天宇陪诊</text> -->
    </view>

    <view class="form">
      <!-- 用户名输入框 -->
      <view class="input-group">
        <input v-model="username" type="text" placeholder="请输入用户名" class="input-field" />
      </view>

      <!-- 密码输入框 -->
      <view class="input-group">
        <input v-model="password" type="password" placeholder="请输入密码" class="input-field" />
      </view>

      <!-- 验证码输入框与验证码按钮放在同一行 -->
 <!--     <view class="captcha-group">
        <input v-model="captcha" type="text" placeholder="请输入验证码" class="input-field captcha-input" />
        <canvas id="captchaCanvas" class="captcha-canvas" canvas-id="captchaCanvas" @click="getCaptcha"></canvas>
      </view -->

      <!-- 错误提示信息 -->
      <view class="error-msg" v-if="errorMsg">{{ errorMsg }}</view>

      <!-- 登录按钮 -->
      <button @click="onLogin" class="login-btn">登录</button>

      <!-- 跳转到注册页面 -->
      <view class="signup-link">
        <text>没有账号？</text>
        <button @click="onGoToRegister" class="register-btn">注册</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const app = getApp();
const username = ref('');
const password = ref('');
const uuid = ref('')
const captcha = ref('');
const captchaImg = ref('');
const errorMsg = ref('');
const router = useRouter();

// 获取验证码的函数
const getCaptcha = async () => {
  // 模拟请求验证码
  app.globalData.utils.myrequest({
    myurl: '/captchaImage',  // 替换为实际获取验证码的接口
    method: 'GET',
    mysuccess: (res) => {
      if (res.code == 200) {
        captchaImg.value = "data:image/gif;base64," + res.img;  // 假设后端返回 base64 编码的验证码图片
        uuid.value = res.uuid
        drawCaptcha();  // 绘制验证码
        errorMsg.value = '';  // 清除错误信息
      } else {
        // errorMsg.value = res.msg;
      }
    },
    myfail: () => {
      // errorMsg.value = '验证码请求失败，请稍后再试';
    }
  });
};

// 绘制验证码
const drawCaptcha = () => {
  const canvas = uni.createCanvasContext('captchaCanvas');
  const canvasWidth = 120;  // 增加画布宽度
  const canvasHeight = 48;  // 设置高度

  const imgWidth = 100;  // 图片宽度
  const imgHeight = 40;  // 图片高度

  // 清空画布并绘制验证码
  canvas.clearRect(0, 0, canvasWidth, canvasHeight);
  canvas.setStrokeStyle('#dcdcdc');
  canvas.setLineWidth(1);
  canvas.strokeRect(0, 0, canvasWidth, canvasHeight);  // 绘制矩形边框
  const x = (canvasWidth - imgWidth) / 2;
  const y = (canvasHeight - imgHeight) / 2;
  canvas.drawImage(captchaImg.value, x, y, imgWidth, imgHeight);
  canvas.draw();  // 完成绘制
};

// 登录请求
const onLogin = () => {
  if (!username.value || !password.value) {
    errorMsg.value = '请输入完整信息';
    return;
  }

  // 模拟登录请求
  app.globalData.utils.myrequest({
    myurl: '/login',  // 替换为实际登录接口
	myloading: true,
    method: 'POST',
    data: {
      username: username.value,
      password: password.value,
      // code: captcha.value,
      uuid: uuid.value
    },
    mysuccess: (res) => {
      if (res.code == 200) {
        uni.setStorageSync('token', 'Bearer ' + res.token);  // 存储 token
        uni.switchTab({
          url: '/pages/index/index'
        });  // 登录成功后跳转到首页
      } else {
        errorMsg.value = res.data.message;
      }
    },
    myfail: () => {
      errorMsg.value = '登录请求失败，请稍后再试';
    }
  });
};

// 跳转到注册页面
const onGoToRegister = () => {
  uni.redirectTo({
    url: '/pages/role/index'
  });  // 跳转到注册页面
};

// 页面加载时请求验证码
// getCaptcha();  // 页面加载时请求验证码
</script>

<style>
	@import url(./index.css);
</style>
